<template>
  <el-main>
    <div class="login_title">修改个人信息</div>
    <div class="login_content">
      <el-form
        ref="updateInfoForm"
        :inline="true"
        label-width="auto"
        :model="updateInfoModel"
        :rules="updateInfoRules"
        size="small"
        label-suffix=":"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="登录账号" prop="username">
              <el-input v-model="updateInfoModel.username" placeholder="登录账号" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="用户名称" prop="name">
              <el-input v-model="updateInfoModel.name" placeholder="请输入用户名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="updateInfoModel.phone" placeholder="请输入电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="updateInfoModel.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="5" v-model="updateInfoModel.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        type="primary"
        size="small"
        @click="handleConfirm"
        style="margin-top: 16px"
      >确定
      </el-button
      >
    </div>
  </el-main>
</template>
<script>
  import {getInfo, updateInfo} from "@/api/login/info";
  import {ApiError} from "../../utils/errors";

  export default {
    name: "updateInfo",
    data() {
      return {
        updateInfoModel: {
          username: null,
          name: null
        },
        updateInfoRules: {
          name: [{required: true, message: "用户名称必须填写", trigger: "blur"}]
        }
      }
    },
    created() {
      this.getUserInfo();
    },
    methods: {
      getUserInfo() {
        getInfo().then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            this.updateInfoModel = res.data.data;
          }
        });
      },
      handleConfirm() {
        this.$refs.updateInfoForm.validate(valid => {
          if (!valid) {
            return;
          }
          const params = {
            name: this.updateInfoModel.name,
            phone: this.updateInfoModel.phone,
            email: this.updateInfoModel.email,
            remark: this.updateInfoModel.remark
          };
          updateInfo(params).then(res => {
            if (res.status == 200) {
              if (!res.data.success) {
                return this.$message.error(ApiError.msg(res.data.message));
              } else {
                this.$message.success("修改个人信息成功");
              }
            }
          });
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/styles/full-form";

  .login_title {
    padding-top: 60px;
    padding-bottom: 20px;
    padding-left: 400px;
    padding-right: 600px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
  }

  .login_content {
    padding-top: 20px;
    padding-left: 400px;
    padding-right: 600px;
  }

</style>
